<template>
  <view class="examine">
    <view class="week" v-for="(item ,index) in examine" :key="index">
      <p>{{item.title}}</p>
      <view class="container" v-for="child_item in item.child" :key="child_item.id">
        <p class="title">{{child_item.child_title}}</p>
        <view class="bottom">
          <p>总分：{{child_item.score}}</p>
          <button type="primary" @click="toExamine(child_item)">进入测验</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "class_examine",
    data() {
      return {
        examine: [{
            title: '第一周',
            child: [{
                id: 9001,
                child_title: '第一讲测验',
                score: 100
              },
              {
                id: 9002,
                child_title: '第一讲测验',
                score: 100
              },
              {
                id: 9003,
                child_title: '第一讲测验',
                score: 100
              },
              {
                id: 9005,
                child_title: '第一讲测验',
                score: 100
              },
            ]
          },
          {
            title: '第二周',
            child: [{
                id: 9006,
                child_title: '第讲测验',
                score: 100
              },
              {
                id: 9007,
                child_title: '第一讲测验',
                score: 100
              },
              {
                id: 9008,
                child_title: '第一讲测验',
                score: 100
              },
              {
                id: 9009,
                child_title: '第一讲测验',
                score: 100
              },
            ]
          },
        ]
      };
    },
    methods: {
      toExamine(item) {
        console.log(item);
        uni.navigateTo({
          url:`/subpackage/examine/examine?id=${item.id}`
        })
      }
    }
  }
</script>

<style lang="less">
  .examine {
    margin-top: 20rpx;
    padding: 10rpx 20rpx;
  
  .week {
      .container {
        margin-top: 20rpx;
        padding: 20rpx;
        background-color: #fff;
        box-shadow: 2rpx 2rpx 2rpx 2rpx #e2e2e2;

        .title {
          font-size: 36rpx;
          font-weight: 500;
        }

        .bottom {
          width: 100%;
          height: 100rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-top: 2rpx solid #e2e2e2;
          button {
            height: 60rpx;
            text-align: center;
            line-height: 60rpx;
          }
        }
      }
    }
  }
</style>
